<template>
<div>
  <div class="hbl-fa">
    <div class="hbl-comm">
      <div class="comment-avatar">
        <div class="user">
		    <div class="user-img"><img :src="avatar?avatar:require('@/assets/img/avatar.jpg')"/></div>
	    </div>
      </div>
      <div class="comment" style="width:80%;" @click="caninput()">
        <el-input
          type="textarea"
          :disabled="isDisabled"
          :autosize="{ minRows: minRows, maxRows: maxRows }"
          placeholder="购买课程后才可以在此评论..."
          v-model="couseComment.content"></el-input>
          <div class="publish publish-btn">
            <button class="btn" @click="doSend()">发表</button>
          </div>
    </div>
      </div>
    </div>

    <div class="comm">
      <div class="su com-rep"></div>
      <div class="com-rep com-title">
        总评论数<span class="com-span">({{ total }})</span>
      </div>
    </div>

    <div v-for="(item, index) in records" class="hbl-child" :key="index">
      <div class="reply"></div>
      <div class="content">
        <div class="comment-f user-avatar">
          <div class="user-img"><img :src="item.avatar"/></div>
        </div>

        <div class="comment-f">
          <div>
            <div class="nickname author">{{ item.nickname }}</div>
            <div class="reply-content">{{ item.content }}</div>
            <div class="date">{{ item.gmtCreate }}</div>
          </div>
          
        </div>
        
      </div>
    </div>
    <el-pagination
        background
        layout="prev, pager, next"
        @current-change="currentChange"
        :page-count="pages"
        :current-page="current"
        :page-size="5">
    </el-pagination>
</div>
</template>

<script>
import Cookies from 'js-cookie'
import commentApi from '@/api/comment'
export default {
  data() {
    return {
        records:[],  //当前页所有数据
        current:1, //当前页
        pages:0, //总页数
        size:5, //每页个数
        total:0, //总个数
        minRows:2, 
        maxRows:4,
        avatar:'',  //头像
        islogin:false, //是否已经登录
        couseComment:{
          courseId:'', //课程id
          teacherId:'', //讲师id
          memberId:'', //会员id
          nickname:'', //会员昵称
          avatar:'', //会员头像
          content:'' //评价内容
        }
    }
  },
  props:['isbuy','courseId','teacherId'],
  components: {

  },

  created() {
    if(this.isLogin()){
        this.avatar = JSON.parse(Cookies.get('userinfo')).avatar
    }
    this.getCourseComments()
  },
  computed:{
    isDisabled(){
      return !(this.isbuy&&this.islogin)
    }
  },
  methods: {
    //获取课程的评论信息
    getCourseComments(){
        if(this.$route.params && this.$route.params.id){
            commentApi.getCourseComments(this.$route.params.id,this.current,this.size)
                .then(response => {
                    this.current = response.data.data.current
                    this.pages = response.data.data.pages
                    this.size = response.data.data.size
                    this.total = response.data.data.total
                    this.records = response.data.data.records
                })
        }else{
            this.$router.push({path:'/course'})
        }
    },
    //评论框是否可以输入
    caninput(){
      //已经登录并且已经购买此课程
      if(!(this.isbuy&&this.isLogin())){
        this.$message.error('需要登录且购买课程以后才可以评论');
      }
    },
    //判断用户是否已经登录
    isLogin(){
      if(Cookies.get('usertoken') != undefined){
        this.islogin = true
        return true;
      }else{
        this.islogin = false
        return false;
      }
    },
    //点击发表按钮事件
    doSend(){
        if(this.isLogin() && this.isbuy){//已经登录并且已经购买这门课程
          if(this.couseComment.content.length > 10){
            this.couseComment.courseId = this.courseId
            this.couseComment.teacherId = this.teacherId
            this.couseComment.avatar = this.avatar
            const userinfo = JSON.parse(Cookies.get('userinfo'))
            this.couseComment.nickname = userinfo.nickname
            this.couseComment.memberId = userinfo.id
            commentApi.addComment(this.couseComment)
              .then(response => {
                this.couseComment.content = ''
                this.getCourseComments()
              })
          }else{
            this.$message.error('评论字数需要在10字以上!');
          }
        }
    },
    //当前页改变
    currentChange(value){
        this.current = value
        this.getCourseComments()
    }
  }
};
</script>
<style type="text/css" scoped>
.user{
    height: 60px;
    width: 60px;
    margin-right: 8px;
}
.user-img img{
    height: 55px;
    width: 55px;
    border-radius:50%;
}
.user-avatar{
    margin:8px;
}
.comment {
  display: inline-block;
  vertical-align: top;
}
.comment-avatar {
  display: inline-block;
  vertical-align: top;
}
.publish {
  margin-top: 10px;
  display: inline-block;
  vertical-align: top;
}
.publish-btn {
  float: right;
}
.btn {
  width: 70px; /* 宽度 */
  margin-top: 3px;
  height: 30px; /* 高度 */
  border-width: 0px; /* 边框宽度 */
  border-radius: 3px; /* 边框半径 */
  background: #3cb371; /* 背景颜色 */
  cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
  outline: none; /* 不显示轮廓线 */
  font-family: Microsoft YaHei; /* 设置字体 */
  color: white; /* 字体颜色 */
  font-size: 13px; /* 字体大小 */
  text-align: center;
  line-height: 30px;
  border-radius: 5px;
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
}
.comm {
  padding: 5px;
}
.su {
  margin-top: 2px;
  width: 5px;
  height: 23px;
  background: #3cb371; /*#1E90FF*/
}
.com-rep {
  display: inline-block;
  vertical-align: top;
}
.com-title {
  font-size: 20px;
  margin-left: 5px;
}
.com-span {
  font-size: 16px;
}
.hbl-fa {
  text-align: left;
}
.hbl-comm {
  padding: 40px;
}
.reply {
  border-top: solid 1px #d9d9d9;
}
.content {
  margin-top: 2px;
  margin-bottom: 2px;
}
.comment-f {
  display: inline-block;
  vertical-align: top;
}
.nickname {
  font-size: 15px;
  color:#FB7299;
  font-weight: bold;
}
.reply-content{
    color: black;
}
.author {
  display: inline-block;
}
.icon {
  background: #dff0d8;
  color: #3c763d;
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 12px;
  font-weight: 400px;
}
.date {
  font-size: 12px;
  margin-top: 5px;
  color: grey;
}
.hbl-child {
  padding: 8px;
}
</style>